<template>
	<view class="container">
		<view class="list-item" @click="toStore(item.id)" v-for="(item,index) in listData" :key="item.id">
			<view class="">
				<image class="store-show" :src="item.picture" />
			</view>
			<view class="store-info">
				<text class="name">{{item.name}}</text>
				<view class="score-sail">
					<text class="score">{{item.score}}分 </text>
					<text class="sail">月售{{item.sales}}+</text>
					<image class="sent-type" src="@/static/images/home/sentType@2x.png" />
				</view>
				<view class="price-time">
					<text class="price">起送 ￥0 配送 ￥3</text>
					<text class="time">40分钟 1.3km</text>
				</view>
				<view class="order-type">
					<image v-if="item.takeaway" class="item" src="@/static/images/home/sentFormTakeaway@2x.png"></image>
					<image class="item" src="@/static/images/home/eatIn@2x.png" mode=""></image>
					<image class="item" src="@/static/images/home/takeIt@2x.png" mode=""></image>
				</view> 
			</view>
		</view>
	</view>
</template>

<script setup>
	import {toRefs} from "vue"
	const props = defineProps({
		listData: {
			typeof: Array,
			require: true
		}
	})
	console.log("listData:::",listData);
	const {listData} = toRefs(props);
	function toStore(id) {
		uni.navigateTo({
			url: `/pages/Home/Store/Store?id=${id}`,
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding: 0 0 24rpx 0;

		.list-item {
			padding: 24rpx;
			background: #fff;
			border-radius: 24rpx;
			display: flex;
			gap: 16rpx;
		}

		.store-show {
			display: inline-block;
			width: 172rpx;
			height: 172rpx;
		}

		.store-info {
			width: 100%;
			display: flex;
			flex-direction: column;
			color: #999999;
			font-size: 24rpx;
			justify-content: center;

			.name {
				font-size: 32rpx;
				color: #333333;
				font-weight: 500;
			}

			.score-sail {
				position: relative;

				.score {
					font-size: 28rpx;
					font-weight: 600;
					color: #F16B13;

				}

				.sent-type {
					width: 80rpx;
					height: 24rpx;
					position: absolute;
					right: 0;
					top: 3rpx;
				}
			}

			.price-time {
				display: flex;
				justify-content: space-between;

			}

			.order-type {
				margin-top: 12rpx;

				.item {
					width: 56rpx;
					height: 32rpx;
				}

			}
		}
	}
</style>